import Vue from 'vue'

Vue.directive('alterELDialogMarginTop', {
	inserted(el, binding, vnode) {
		el.firstElementChild.style.marginTop = binding.value + 'px'
	}
})

Vue.directive('alterELDialogMarginLeft', {
	inserted(el, binding, vnode) {
		el.firstElementChild.style.marginLeft = binding.value + 'px'
	}
})

Vue.directive('drag', {
	inserted(el, binding, vnode) {
		let odiv = el.getElementsByTagName('div')[0];
		let headerDiv = odiv.getElementsByTagName('div')[0];
		const deepHeader = headerDiv.querySelector('header');
		const flag = elementContains(headerDiv, deepHeader); //兼容dialog&&drawer
		if(flag) {
			headerDiv = deepHeader;
		}
		headerDiv.onmousedown = e => {
			// document.body.style.userSelect = 'none';
			// document.body.style.webkitUserSelect = 'none';
			// document.body.style.msUserSelect = 'none';
			// document.body.style.mozUserSelect = 'none';
			// let odiv = el.getElementsByTagName('div')[0];
			let disX = e.clientX - odiv.offsetLeft;
			let disY = e.clientY - odiv.offsetTop;
			document.onmousemove = e => {
				let left = e.clientX - disX;
				let top = e.clientY - disY;
				odiv.style.marginLeft = left + 'px';
				odiv.style.marginTop = top + 'px';
			};
			document.onmouseup = e => {
				document.onmousemove = null;
				document.onmouseup = null;
				// document.body.style.userSelect = 'auto';
				// document.body.style.webkitUserSelect = 'auto';
				// document.body.style.msUserSelect = 'auto';
				// document.body.style.mozUserSelect = 'auto';
			};
		};
	}
})

const elementContains = (parent, child) => parent !== child && parent.contains(child);